2.Grid settings(中).markdown

2.Grid settings(中)

上個章節講了Susy2的簡易設定方式， 接著我們來看它預設的全域設定，

##youtube影片教學

Global Defaults

$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 4,
  gutters: .25,
  column-width: false,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

只要你載入了Susy2以後， 上面的Global Defaults就會自動載入， 接著我再來針對一些我個人常用的設定來進行解說

flow

預設：ltr
選項：ltr、rtl

Susy2預設是用float:left從左到右來排列Grid，
而susy1也是一樣，
如果你希望你的欄是從右邊排到左邊， 再把設定改為rtl即可。

container

預設：auto
選項：可自行設定grid的寬度，例：960px、60em

container可以直接寫Grid的總寬度進去，
他會依照你columns與gutters的設定，
自動算出數值， 所以如果你不想要透過column-width來算出總寬的話，
那也可以使用container的功能。

container-position

預設：center
選項：left、center、 right、 <length>

預設是center，也就是讓你的Grid水平置中，
left、right則是可讓你的Grid靠左或靠右對齊，
而length則是自己寫一個自訂數值，
這樣你的margin-left、與margin-right則會改為你的數值。

global-box-sizing

預設：content-box
選項：content-box、border-box

這個設定有點像是你告訴Susy2你的版型是用哪種方式排版的， 如果你選擇border-box的話，
那就還必須在你的SASS裡面加上Susy2的Mixin@include border-box-sizing;，
也就是如下程式碼：

$susy: (
  global-box-sizing: border-box 
  );
@include border-box-sizing;
//編譯出來的CSS
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

如果你是使用預設的content-box的話，
在gutter-position:inside、inside-static的設定來排版的時候，
你會發現用span編譯出來的程式碼，
都會加上box-sizing:border-box的設定，
這會造成語法太多造成CSS量變得太大，
但如果你設定你的設定是border-box的話，
就不會編譯出這些code，
因為*, *:before, *:after所代表的意思就是所有元素都可以吃到這設定，
這樣編譯出來的code也乾淨多了。

但這裡的原理我個人認為還蠻重要的，
這跟盒模型(Box Model)有關， 瀏覽器預設都是content-box的設定， 也就是如果你今天有個div設定寬50px後， 但又下了padding-left:10px與padding-right:10px後
該div會變成70px，
所以有些設計師在使用Grid的時候，
因為不懂content-box的原理，
導致欄變寬，就變成不是依照比例去排，
例如下圖都是一欄的寬度，

但如果在黑色的div推擠了左右padding，就不符比例，

這問題在以前也相當困擾網頁設計師，
直到CSS3多了box-sizing的語法，
在susy2的文件也有介紹到，
他提到如果你的網頁只要兼容到IE8以上，
建議你可以在reset.css上加上這行，

*, *:before, *:after {
  box-sizing: inherit;
}

這樣子你的盒模型只要設定一個寬度，
不管你是用padding或border，
他的寬度就都不會受到影響了。

我自己是都習慣用box-size: border-box了，
但如果你的客源都還是必須兼容ie7以下，
那就沒辦法使用這個設定了。

###last-flow 預設：to
選項：to、from

預設是to的情況下， 寫了下面的語法，
.content就會變成與float:right，
如果改成from的話，則會變成float:left， 如果你的gutter-position設定成after或before的話，
那就可能有機會會改到這個設定， PS：這裡的last就等於susy1的omega

.content{
  @include span(1 last)
}

###use-custom clearfix 預設：false
選項：true、false

Susy2會自動抓取compass預設的clearfix的mixin，
但如果你不希望Susy2使用compass的clearfix，
你可以在這設定寫true後，
自己寫一個名稱為clearfix的mixin， Susy2會優先抓取你的mixin設定

---

下一章節會再來針對debug模式，
搭配compass vertical rhythm來做詳細的解說。